<template>
    <el-form ref="formRef" :model="courseFormData" label-width="120" :rules="rules">
        <el-form-item prop="name" label="课程名称">
            <el-input v-model="courseFormData.name" placeholder="请输入课程名称" style="width:90%" />
        </el-form-item>
        <el-form-item label="时长(分钟)">
            <el-input-number v-model="courseFormData.duration" :min="0" controls-position="right" class="w40" />
        </el-form-item>
        <el-form-item label="课堂容纳人数">
            <el-input-number v-model="courseFormData.contains" :min="0" controls-position="right" class="w40" />
        </el-form-item>
        <el-form-item label="消耗次数/节">
            <el-input-number v-model="courseFormData.timesCost" :min="1" controls-position="right" class="w40" />
        </el-form-item>
        <el-form-item label="课程颜色">
            <el-color-picker v-model="courseFormData.color" />
        </el-form-item>
        <el-form-item label="支持会员卡">
            <el-table ref="multipleTableRef" :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
                :data="cardList" style="width: 90%" size="small" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="100" />
                <!-- <el-table-column label="编号" prop="id"/> -->
                <el-table-column property="cardName" sortable label="会员卡" />
                <el-table-column property="cardType" sortable label="会员卡类型" />
            </el-table>
        </el-form-item>
        <el-form-item label="课程描述">
            <!-- {{ courseFormData.introduce }} -->
            <WangEditor v-model:modelValue="courseFormData.introduce" class="editor-big" />
        </el-form-item>
        <div class="form-div">高级功能(对预约会员条件的限制)</div>
        <el-form-item label="限制性别">
            <template #label>
                <h4>限制性别</h4>
            </template>
            <el-select v-model="courseFormData.limitSex" placeholder="无限制" class="w20">
                <el-option label="无限制" value="无限制" />
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
            </el-select>
        </el-form-item>
        <el-form-item label="限制年龄">
            <template #label>
                <h4>限制年龄</h4>
            </template>
            <el-radio-group v-model="courseFormData.limitAge">
                <el-radio :value="-1">不限制</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="  ">
            <el-radio-group v-model="courseFormData.limitAge">
                <el-radio :value="0 || courseFormData.limitAge > 0 ? courseFormData.limitAge : 0">
                    <el-input v-model="courseFormData.limitAge" style="width:250px">
                        <template #prepend>
                            <span>大于</span>
                        </template>
                        <template #append>
                            <span>岁</span>
                        </template>
                    </el-input>
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="限制次数">
            <template #label>
                <h4>限制次数</h4>
            </template>
            <el-radio-group v-model="courseFormData.limitCounts">
                <el-radio :value="-1">不限制</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="  ">
            <el-radio-group v-model="courseFormData.limitCounts">
                <el-radio :value="0 || courseFormData.limitCounts > 0 ? courseFormData.limitCounts : 0">
                    <el-input v-model="courseFormData.limitCounts" style="width:350px">
                        <template #prepend>
                            <span>每名会员最多可以预约本课程</span>
                        </template>
                        <template #append>
                            <span>次</span>
                        </template>
                    </el-input>
                </el-radio>
                </el-radio-group>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="savaCourse(ruleFormRef)">保存</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup>
import { ref, toRefs, reactive,onMounted, onUnmounted,watch,computed} from 'vue'
import WangEditor from '@/components/WangEditor.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const props = defineProps(['courseFormData', 'addEditDrawer', 'drawerTitle'])
const emit = defineEmits(['update:addEditDrawer'])
const { drawerTitle,courseFormData } = toRefs(props)
//表单数据
//表单验证规则
const rules=reactive({
    name:[
        {required: true,message: '请输入课程名',trigger: 'blur',},
    ]
})

//拿到表格对象
const multipleTableRef = ref()
//todo 支持的会员卡需要调用接口 获取相关数据  获取被选中的会员卡的数据
const  cardList = [
    {id:1,cardName:'金卡',cardType:'次卡(有限期)'},
    {id:2,cardName:'体验卡卡',cardType:'次卡(有限期)'},
    {id:3,cardName:'至尊卡',cardType:'次卡(无限期)'},
    {id:4,cardName:'测试卡',cardType:'次卡(有限期)'},
    {id:5,cardName:'超级卡',cardType:'次卡(无限期)'},
    {id:6,cardName:'测试卡1',cardType:'次卡(有限期)'},
]
//表格中被选中的数据回显
const toggleSelection = (rows) => {
     //现情况之前被选中的清空
    multipleTableRef.value.clearSelection()
      console.log(rows, 'rows--')
    if (rows) {
        rows.forEach((row) => {
            multipleTableRef.value.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value.clearSelection()
    }
}
//计算属性记录被选中的会员卡
const selected = computed(() => cardList.filter(item => courseFormData.value.memberCardData.includes(item.id)))

watch(courseFormData,(val)=>{
    //监听数据的变化   改变表格中被选中的数据
    console.log(val,'数据监听....')
    toggleSelection(selected.value)
},{deep:true})

onMounted(() => {
      const  selecteds = cardList.filter(item=> courseFormData.value.memberCardData.includes(item.id))
      console.log(selecteds,'被选中的会员卡--')
    //假设被选中的数据
    // toggleSelection([cardList[0],cardList[2]])
    toggleSelection(selecteds)
})
//当表格多选发生改变的时候 调用的方法
//支持的会员卡 被选选中的数据存储   做保存操作的时候要给
const  multipleSelection = ref([])
const  handleSelectionChange = (val)=>{
    multipleSelection.value= val
}
//保存添加或者修改会员开的数据 
const savaCourse = () => {
    console.log('=========添加或者修改课程========')
    ElMessageBox.confirm(
        `确定要${drawerTitle.value}吗?`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //todo调用后端接口 保存
            //判断是添加会员卡还是修改会员卡
            //调用后端接口
            console.log('表单收集到的数据:',courseFormData.value)

            ElMessage({
                type: 'success',
                message: `${drawerTitle.value}成功`,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: `取消${drawerTitle.value}操作`,
            })
        })
}
//取消 
const cancel = () => {
    emit('update:addEditDrawer', false)
}
</script >
<style lang="less" scoped>
//  /deep/.el-color-picker__trigger{
 :deep(.el-color-picker__trigger)pm{
    width:200px;
    height: 42px;
}
.form-div{
   border-bottom:1px solid #e0e0e0;
   padding:10px 50px; 
   font-size:24px;
   font-weight:200; 
   margin-bottom:20px
    
}
.w40{
    width:40%
}
.w20{
    width:20%
}

.editor-big{
	// width: 90%;
	border: 1px solid #c2c2c2;
	margin-bottom: 20px;
	
}
.form-span{
    display: inline-block;
    color:#676a6c;
    background-color:#eee;
    height: 32px;
    padding: 0px 8px;
    border-radius: 0 5px 5px 0;
}
</style>